<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">



<body data-type="index">

    <div class="am-g tpl-g">
        <!-- 头部 -->
        <jsp:include page="common/header.jsp"></jsp:include>
        <!-- 风格切换 -->

        <!-- 侧边导航栏 -->
        <jsp:include page="common/memu.jsp"></jsp:include>


        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="row-content am-cf">
                <div class="row  am-cf">
                    
                    <div class="row">

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">流水操作</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body am-fr">

                                <form class="am-form tpl-form-line-form">


                                <div class="am-form-group">
                                        <label for="user-phone" class="am-u-sm-3 am-form-label">银行卡 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <select id="cardSelect" data-am-selected="{searchBox: 1}" style="display: none;">
  <option value="no">请选择银行卡</option>
  <option value="b">6222*****196</option>
  <option value="o">6222*****197</option>
</select>
<button type="button" class="am-btn am-btn-default am-radius" onclick="queryFlows();">查询</button>
                                        </div>

                                    </div>

                                    

                                    <div class="am-form-group">
                                        <label for="password" class="am-u-sm-3 am-form-label">密码 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <input type="password" class="tpl-form-input" id="password" placeholder="请输入6位银行卡密码">
                                            <small></small>
                                        </div>
                                    </div>

                                </form>



                                <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl"></div>
                                <div class="widget-function am-fr">
                                   
                                </div>
                            </div>
                            <div class="widget-body  widget-body-lg am-fr">

                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                                    <thead>
                                        <tr>
                                            <th>卡号</th>
                                            <th>金额</th>
                                            <th>备注</th>
                                            <th>时间</th>
                                      
                                        </tr>
                                    </thead>
                                    <tbody id="flowData">
                                        <tr class="gradeX">
                                            <td>6222*****196</td>
                                            <td>800.00</td>
                                            <td>存款</td>
                                            <td>2017-12-19</td>
                                        </tr>
                                        <!-- more data -->
                                    </tbody>
                                </table>

                                <ul class="am-pagination">
                                  <li><a href="###" onclick="first();">首页 &raquo;</a></li>
								  <li><a href="###" onclick="pre();">&laquo; 上一页</a></li>
								  <li><a href="###" onclick="next();">下一页 &raquo;</a></li>
								  <li><a href="###" onclick="last();">尾页 &raquo;</a></li>
								  								<li id="pageInfo">1/20
         
        							</li>
								</ul>



                            </div>
                        </div>



                            </div>

                        </div>
                    </div>
                </div>

        

                    
                    
                </div>

               

 
                </div>



            </div>
        </div>
    </div>
    </div>


    <script>
        var currentPage = 1;
        var totalPage = 0;

        function last() {
            currentPage = totalPage;
            queryFlows();
        }
        function first() {
            currentPage = 1;
            queryFlows();
        }
        function next() {
            if (currentPage == totalPage) {
                return;
            }
            currentPage ++;
            queryFlows();
        }
        function pre() {
            if (currentPage == 1) {
                return;
            }
            currentPage --;
            queryFlows();
        }
        function loadMyCard() {
            $.get("/card/listMyCard.do", {
            }, function (xx) {
                if (xx.code != 1000) {
                    alert(xx.message);
                    return;
                }

                var msg = '<option value="no">请选择银行卡</option>';
                var cards = xx.data;
                for (var i=0; i<cards.length; i++) {
                    var card = cards[i];
                    msg += ' <option value="'+card.cardId+'">'+card.cardNum+'</option>';
                }
                $('#cardSelect').html(msg);
            });
        }

        loadMyCard();

        function queryFlows() {
            console.log(999999)
            $.get("/flow/listFlow.do", {
                cardId : $('#cardSelect').val(),
                passowrd : $('#password').val(),
                currentPage : currentPage
            }, function (xx) {
                if (xx.code != 1000) {
                    alert(xx.message);
                    if (xx.code == 5000) {
                        window.location.href = '/';
                    }
                    return;
                }

                totalPage = xx.data.totalPage;
                var msg = '';
                var flows = xx.data.data;
                for (var i=0; i<flows.length; i++) {
                    var flow = flows[i];
                    msg += '<tr class="gradeX">\n' +
                        '                                            <td>'+flow.cardNum+'</td>\n' +
                        '                                            <td>'+flow.amount+'</td>\n' +
                        '                                            <td>'+flow.remark+'</td>\n' +
                        '                                            <td>'+flow.createTime+'</td>\n' +
                        '                                        </tr>';
                }

                console.log(msg)
                $('#flowData').html(msg);
                $('#pageInfo').html(currentPage + '/' + totalPage);
            });
        }

        $('#flowA').addClass("active")
    </script>

</body>

</html>